<template>
    <div class="container">
        <div v-for="(item,index) in itemList" :value="item" :key="index">
            <Card class="card">
                <p slot="title">保单号：{{item['保单号']}}</p>
                <br>
                <p>已拥有保险：{{item['保险名']}}</p>
                <br>
                <p>保单额度：{{item['保险额度']}}</p>
                <br>
                <div @click="to_report_details(item['保单号'])">
                    <i-button type="primary" shape="circle" @click="passValue" style="width: 250px">我要报案</i-button>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
  import eventBus from "../eventBus";

  export default {
    name: "ReportPolicy",
    data() {
      return {
        itemList: [],
        test: '哈哈哈哈哈'
      }
    },
    methods: {
      passValue() {
        eventBus.$emit('myevent', this.test)
      },
      to_report_details (number) {
        this.$router.push({path: '/report_details', query: {number: number}})
      }
    },
    mounted() {
      this.$http.get('/user/bought').then(response => {
        if (response.data.code === 200) {
          console.log(response.data)
          this.itemList = response.data.bought

        }
      }).catch(err => {
        alert('请求失败')
      })
    }
  }
</script>

<style scoped>
    /*.container {*/
    /*    display: grid;*/
    /*    grid-template-columns: 297px 400px 400px;*/
    /*    grid-template-rows: 303px 233px 229px;*/
    /*    grid-auto-flow: row dense;*/
    /*    grid-gap: 40px;*/
    /*    margin-top: 20px;*/
    /*}*/

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between
    }


    .card {
        height: 270px;
        margin-top: 50px;
    }
</style>